<template>
	<div>
		<ProTable ref="proTable" title="酒藏监控" :columns="columns" :requestApi="getTableList" :init-param="initParam">
			<!-- 表格 功能 按钮 -->
			<template #otherButton>
				<el-button @click="onExport" v-auth="'baijiu-cert:monitor:export:invoke'"> 导出 </el-button>
			</template>
			<!-- Expand -->
			<template #expand="scope">
				{{ scope.row }}
			</template>
		</ProTable>
	</div>
</template>

<script setup lang="tsx" name="liquorCerMonitoring">
import { onMounted, ref, reactive, computed, nextTick } from 'vue';
import dayjs from 'dayjs';
import { ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import ProTable from '../../../../components/ProTable/index.vue';
import { ProTableInstance, ColumnProps } from '../../../../components/ProTable/interface';
import { fetchMonitoringList, fetchMonitoringExport } from '/@/api/liquorCer';
import { useDownload } from '/@/hooks/useDownload';
import constant from '/@/utils/constant';
import { fenToYuan } from '/@/utils/commonFunction';

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

const router = useRouter();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	searchType: 'ORDER-NO',
	paramTimeType: 'time',
});

const handleParams = (params: any) => {
	let data = {
		...params,
	};
	if (data.paramTime) {
		data[`startTime`] = dayjs(data.paramTime[0]).format('YYYY-MM-DD HH:mm:ss');
		data[`endTime`] = dayjs(data.paramTime[1]).format('YYYY-MM-DD HH:mm:ss');
		delete data.paramTimeType;
		delete data.paramTime;
	}
	return data;
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getTableList"
const getTableList = (params: any) => {
	const data = handleParams(params);
	return fetchMonitoringList(data);
};

const searchArr = [
	{
		label: '订单编号',
		value: 'ORDER-NO',
	},
	{
		label: '商品ID',
		value: 'ID',
	},
	{
		label: '商品名称',
		value: 'NAME',
	},
	{
		label: '酒藏链码',
		value: 'CODE',
	},
];

// 表格配置项
const columns: ColumnProps<any>[] = [
	{
		prop: 'keywords',
		label: '酒藏搜索',
		isShow: false,
		search: {
			span: 2,
			render: (scope: any) => {
				const slot = {
					prepend: () => (
						<el-select
							v-model={scope.searchParam.searchType}
							placeholder="Select"
							style="width: 100px"
							onChange={(value) => (scope.searchParam.searchType = value)}
						>
							{searchArr.map((item) => (
								<el-option key={item.value} label={item.label} value={item.value} />
							))}
						</el-select>
					),
				};
				return <el-input v-model={scope.modelValue} v-slots={slot} placeholder={getPlaceholder.value} maxlength={50}></el-input>;
			},
		},
	},
	{
		prop: 'paramTime',
		label: '时间搜索',
		isShow: false,
		search: {
			span: 2,
			xs: 1,
			sm: 1,
			md: 2,
			lg: 1,
			xl: 1,
			render: (scope: any) => {
				return (
					<div class="flex-center">
						<el-select
							v-model={scope.searchParam.paramTimeType}
							placeholder="Select"
							style="width: 100px"
							class="mini-gray-select flex-shrink"
							onChange={(value) => (scope.searchParam.paramTimeType = value)}
						>
							{[
								{
									label: '发行时间',
									value: 'time',
								},
							].map((item) => (
								<el-option key={item.value} label={item.label} value={item.value} />
							))}
						</el-select>
						<el-date-picker
							v-model={scope.searchParam.paramTime}
							type="datetimerange"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							format="YYYY-MM-DD HH:mm:ss"
							date-format="YYYY-MM-DD"
							time-format="HH:mm:ss"
						/>
					</div>
				);
			},
		},
	},
	{
		prop: 'id',
		label: '酒藏ID',
		minWidth: 80,
	},
	{
		prop: 'orderNo',
		label: '原始订单号',
		minWidth: 220,
		render: (scope) => {
			return scope.row.orderNo == '好友赠送' ? (
				<span class="color-primary">-</span>
			) : (
				<el-link type="primary" v- underline={false} onClick={() => router.push(`/order/query/detail/${scope.row.orderId}`)}>
					{scope.row.orderNo}
				</el-link>
			);
		},
	},
	{
		prop: 'productId',
		label: '商品ID',
		minWidth: 80,
	},
	{
		prop: 'productName',
		label: '商品名称',
		minWidth: 160,
	},
	{
		prop: 'skuId',
		label: '规格ID',
		minWidth: 80,
	},
	{
		prop: 'skuName',
		label: '规格名称',
		minWidth: 160,
	},
	{
		prop: 'certificateCode',
		label: '酒藏链码',
		minWidth: 280,
	},
	{
		prop: 'publishTime',
		label: '发行时间',
		minWidth: 160,
	},
	{
		prop: 'holder',
		label: '当前持有人',
		minWidth: 260,
		align: 'left',
		render: (scope: any) => {
			return scope.row.holder ? (
				<div class="flex-center">
					<el-link type="primary" class="mr10" underline={false} onClick={() => router.push(`/user/detail/${scope.row.holder?.id}`)}>
						{scope.row.holder?.nickname}
					</el-link>
					<el-tag type={scope.row.holder?.userType ? 'primary' : 'success'}>{constant.USERTYPE[scope.row.holder?.userType]}</el-tag>
				</div>
			) : (
				'--'
			);
		},
	},
	{
		prop: 'certificateStatus',
		label: '酒藏状态',
		minWidth: 120,
		search: { el: 'select', props: { placeholder: '选择酒藏状态', clearable: true, filterable: true } },
		enum: [
			{
				label: '流转中',
				value: 0,
			},
			{
				label: '已核销',
				value: 1,
			},
		],
	},

	{
		prop: 'custodianStatus',
		label: '代管状态',
		minWidth: 160,
		search: { el: 'select', props: { placeholder: '选择代管状态', clearable: true, filterable: true } },
		enum: [
			{
				label: '未出库',
				value: 0,
			},
			{
				label: '已出库',
				value: 1,
			},
			{
				label: '代管中',
				value: 2,
			},
			{
				label: '已提货',
				value: 3,
			},
		],
	},
	{
		prop: 'restStorageDays',
		label: '剩余存储时长(天)',
		minWidth: 160,
	},
	{
		prop: 'custodianFee',
		label: '代管费(元)',
		minWidth: 180,
		render: (scope: any) => {
			return fenToYuan(scope.row.custodianFee);
		},
	},
];

const getPlaceholder = computed(() => {
	const target = searchArr.find((item) => {
		return item.value == proTable.value?.searchParam.searchType;
	});
	return target ? `输入${target?.label}搜索` : '';
});

// 保存并导出
const onExport = () => {
	ElMessageBox.confirm('确认导出数据?', '温馨提示', { type: 'warning' }).then(() =>
		useDownload(fetchMonitoringExport, '酒藏监控列表', handleParams(proTable.value?.searchParam))
	);
};
</script>

<style lang="scss">
.demo-tabs {
	.el-tabs__header {
		margin-bottom: 0;
	}
}
</style>
